<template>
  <div class="container">
    <!-- <Row :gutter="50">
      <i-Col span="6" style="min-width:61px;"> -->
    <Layout>
      <Sider
        hide-trigger
        style="margin-right: 50px; min-width: 240px; background-color: #fff"
      >
        <div class="left">
          <div class="head">
            <span>
              <Icon type="ios-list-box" size="16" />
              <span>产品分类</span>
              <Icon
                type="md-add"
                v-if="Validation.check(Resources.DEVICE_SORT_ADD)"
                @click="handleAdd"
                size="20"
              />
            </span>
          </div>
          <div class="tree-box">
            <div
              style="font-size: 14px; padding: 5px 10px"
              @click="getAllResult"
              :class="{ 'active-menu': AllSort === true }"
            >
              <Icon type="ios-folder-open-outline" size="20" />
              <label>全部</label>
            </div>
            <div
              class="tree-menu"
              v-for="(item, index) in bloc.sortPage.items"
              :key="item.id"
              :class="{
                'active-menu':
                  item.productCategoryId === bloc.sortDevice.productCategoryId && AllSort === false,
              }"
              @click="selectCurrentMenu(item, index)"
              @mouseenter="mouseMenuItem = item.productCategoryId"
              @mouseleave="mouseMenuItem = -1"
            >
              <Icon type="ios-folder-open-outline" size="20" />
              <label>{{ item.categoryName }}</label>
              <transition name="fade">
                <span style="width: 70px" v-if="mouseMenuItem === item.productCategoryId">
                  <Icon
                    :type="icon"
                    v-for="icon in menuIcons"
                    :key="icon"
                    @click.stop="handleSort(icon, item)"
                    color="#666"
                    size="16"
                  />
                </span>
              </transition>
            </div>
          </div>
        </div>
      </Sider>
      <!-- </i-Col> -->

      <!-- <i-Col span="18"> -->
      <Content>
        <!-- <div class="nav"> -->
        <!-- </div> -->

        <div class="right">
          <ul>
            <Row>
              <div class="toolbar">
                <Button
                  type="primary"
                  icon="md-add"
                  style="margin-right: 30px"
                  @click="editItem()"
                  v-if="Validation.check(Resources.PRODUCT_ADD)"
                >添加商品
                </Button>
                <Input
                  placeholder="商品名称"
                  v-model="bloc.model.modelName"
                  style="width: 180px; margin-right: 10px"
                  type="text"
                />
                <Button
                  icon="ios-search"
                  type="primary"
                  style="margin-left: 5px; margin-right: 5px"
                  @click="
                    bloc.getProductList(
                      bloc.modelPage.pageIndex,
                      bloc.modelPage.pageSize,
                      'DESC',
                      bloc.sortDevice.productCategoryId,
                      bloc.model.modelName
                    )
                  "
                >
                  查询
                </Button>
                <Button icon="md-refresh" @click="reset">重置</Button>
              </div>
            </Row>
          </ul>
          <div>
            <Table
              border
              ref="selection"
              :columns="columns4"
              :data="bloc.modelPage.items"
            >
              <template slot-scope="{ row, index }" slot="action">
                <div style="white-space: nowrap">
                  <Button
                    size="small"
                    style="margin-left: 5px; margin-right: 5px"
                    @click="editItem(row)"
                    type="info"
                    v-if="Validation.check(Resources.DEVICE_MODEL_UPDATE)"
                  >
                    编辑
                  </Button>
                  <Button
                    size="small"
                    style="margin-left: 5px; margin-right: 5px"
                    @click="toRemoveItem(row)"
                    v-if="Validation.check(Resources.DEVICE_MODEL_DELETE)"
                    type="warning"
                  >删除
                  </Button>
                </div>
              </template>
              <slot name="footer" slot="footer">
                <Page
                  show-elevator
                  show-total
                  show-sizer
                  :total="bloc.modelPage.itemCount"
                  :current="bloc.modelPage.pageIndex"
                  :page-size="bloc.modelPage.pageSize"
                  :page-size-opts="[15, 30, 50, 100]"
                  @on-change="changepages"
                  @on-page-size-change="changepagesize"
                />
              </slot>
            </Table>
          </div>
        </div>
      </Content>
      <!-- </i-Col> -->

      <Modal
        title="新增产品分类"
        v-model="addCategory"
        class-name="vertical-center-modal"
        @on-cancel="cancel"
      >
        <p slot="header">
          <span>新增产品分类</span>
        </p>
        <div style="text-align: center">
          <Form
            ref="sort"
            :model="sort"
            :rules="ruleValidate"
            label-position="right"
            :label-width="100"
          >
            <FormItem label="产品分类:" prop="sortName" required>
              <Input v-model="sort.sortName" :maxlength="5" />
            </FormItem>
            <FormItem label="是否启用:" prop="sortState">
              <el-switch v-model="sort.sortState"></el-switch>
            </FormItem>
            <FormItem label="分类图标:" prop="sortIcon" required>
              <div class="demo-upload-list" v-for="(item, index) in fileList" :key="index">
                <template v-if="item.status === 'finished'">
                  <img :src="item.sortIcon">
                  <div class="demo-upload-list-cover">
                    <Icon type="ios-eye-outline" @click.native="handleView(item.sortIcon)"></Icon>
                    <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
                  </div>
                </template>
                <template v-else>
                  <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                </template>
              </div>
              <Upload
                ref="upload"
                :show-upload-list="false"
                :action="uploadAction"
                :max-size="50"
                :format="['jpg','png']"
                :headers="uploadHeaders"
                :on-format-error="handleFormatError1"
                :on-exceeded-size="handleMaxSize1"
                :on-success="handleSuccess"
                type="drag"
                :multiple="true"
                style="display: inline-block;width:58px;margin-left:15px"
              >
                <div style="width: 58px;height:58px;line-height: 58px;">
                  <Icon type="ios-camera" size="20"></Icon>
                </div>
                <Modal title="View Image" v-model="visible">
                  <img :src="imgUrl" v-if="visible" style="width: 100%">
                </Modal>
              </Upload>
              <p style="margin-left: 15px">支持 JPG、PNG 格式，图片小于50k</p>
            </FormItem>

          </Form>
        </div>
        <div slot="footer">
          <AppButton
            ref="save"
            type="primary"
            @click="addSort(sort)"
          >确定</AppButton
          >
        </div>
      </Modal>

      <Modal
        title="编辑产品分类"
        v-model="edit"
        class-name="vertical-center-modal"
        @on-cancel="cancel"
      >
        <p slot="header">
          <span>编辑产品分类</span>
        </p>
        <div style="text-align: center">
          <Form
            ref="editSort"
            :model="sort1"
            :rules="ruleValidate1"
            label-position="right"
            :label-width="100"
          >
            <FormItem label="分类名称:" prop="sortName1">
              <Input v-model="sort1.sortName1" :maxlength="5" />
            </FormItem>
            <FormItem label="是否启用:" prop="sortState1">
              <el-switch v-model="sort1.sortState1"></el-switch>
            </FormItem>
            <FormItem label="分类图标:" prop="sortIcon1" required>
              <div class="demo-upload-list" v-for="(item, index) in fileList1" :key="index">
                <div v-if = "isNaN(item.sortIcon)">
                  <template v-if="item.status === 'finished'">
                    <img :src="item.sortIcon">
                    <div class="demo-upload-list-cover">
                      <Icon type="ios-eye-outline" @click.native="handleView1(item.sortIcon)"></Icon>
                      <Icon type="ios-trash-outline" @click.native="handleRemove1(item)"></Icon>
                    </div>
                  </template>
                  <template v-else>
                    <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
                  </template>
                </div>
              </div>
              <Upload
                ref="upload"
                :show-upload-list="false"
                :action="uploadAction"
                :max-size="50"
                :format="['jpg','png']"
                :headers="uploadHeaders"
                :on-format-error="handleFormatError1"
                :on-exceeded-size="handleMaxSize1"
                :on-success="handleSuccess1"
                type="drag"
                :multiple="true"
                style="display: inline-block;width:58px;margin-left:15px"
              >
                <div style="width: 58px;height:58px;line-height: 58px;">
                  <Icon type="ios-camera" size="20"></Icon>
                </div>
                <Modal title="View Image" v-model="visible1">
                  <img :src="imgUrl1" v-if="visible1" style="width: 100%">
                </Modal>
              </Upload>
              <p style="margin-left: 15px">支持 JPG、PNG 格式，图片小于50k</p>
            </FormItem>
          </Form>
        </div>
      </Modal>
    </Layout>
  </div>
</template>
<script lang="ts">
    import { Component, Vue } from 'vue-property-decorator';
    import { ProductListBloc } from './ProductListBloc';
    import { DeviceModel } from '@/base/model/DeviceModel';
    import { Route } from 'vue-router';
    import CompanySelector from '@/component/CompanySelector.vue';
    import { Validation } from '@/base/Validation';
    import { Resources } from '@/base/Resources';
    import { AppButton } from '@/type/AppButton';
    import { store } from '@/store/Store';
    import { baseUrl } from '@/base/Request';
    import { ProductCategory } from '@/base/model/ProductCategory';
    import { Product } from '@/base/model/Product';

    const getColumns = (bloc: ProductListBloc) => [
        {
            title: '分类名称',
            width: 100,
            render: (h: any, params: any) => {
                return h('span', {
                    domProps: {
                        innerText: bloc.getsortName(params.row.productModelName)
                    }
                });
            },
            align: 'left',
            tooltip: true
        },
        {
            title: '分类名称',
            key: 'productName',
            align: 'left',
            minWidth: 80,
            tooltip: true
        },
        {
            title: '发布状态',
            key: 'status',
            render: (h: any, params: any) => {
                return h('div', [
                    h(
                        'i-switch',
                        {
                            props: {
                                type: 'primary',
                                size: 'small',
                                title: '状态',
                                disabled: (params.row.isAble === 0 && !Validation.check(Resources.DEVICE_UPDATE)),
                                value: params.row.isAble === 1
                            },
                            style: {
                                marginRight: '2px'
                            },
                            on: {
                                'on-change': value => {
                                    bloc.switchStatus(params.row.bannerid, value, params.index, 0);
                                }
                            }
                        },
                        'selected'
                    )
                ]);
            },
            tooltip: true,
            width: 80
        },
        {
            title: '置顶',
            key: 'status',
            render: (h: any, params: any) => {
                return h('div', [
                    h(
                        'i-switch',
                        {
                            props: {
                                type: 'primary',
                                size: 'small',
                                title: '状态',
                                disabled: (params.row.isUp === 0 && !Validation.check(Resources.DEVICE_UPDATE)),
                                value: params.row.isUp === 1
                            },
                            style: {
                                marginRight: '2px'
                            },
                            on: {
                                'on-change': value => {
                                     bloc.switchStatus(params.row.productId, value, params.index, 1);
                                }
                            }
                        },
                        'selected'
                    )
                ]);
            },
            tooltip: true,
            width: 80
        },
        {
            title: '操作',
            key: 'action',
            width: 47 * 2 + 20,
            align: 'left',
            slot: 'action',
            fixed: 'right'
        }
    ];
    @Component({
        components: { CompanySelector }
    })
    export default class extends Vue {
        Validation = Validation;
        Resources = Resources;
        bloc: ProductListBloc = new ProductListBloc();
        readonly init!: number;
        AllSort: boolean = false;
        mouseMenuItem = -1;
        model: any = {
            companyId: 0,
            isFirmware: true,
            isSelfMotion: true,
            isSoftware: true,
            modelIcon: '',
            modelName: '',
            sortId: 0
        };
        columns4 = getColumns(this.bloc);

        beforeRouteEnter(to: Route, from: Route, next: (vm: any) => void) {
            next((vm) => {
                vm.bloc.sortDevice.productCategoryId = Number(vm.$route.query.sortId) || undefined;
                if (!vm.bloc.sortDevice.id) {
                    vm.AllSort = true;
                }
                vm.initTreeList();
                vm.getAllProduct();
                // vm.bloc.getAllCategory(1, 1000, 'DESC')
            });
        }

        ruleValidate = {
            sortName: [
                { required: true, message: '分类名称不能为空', trigger: 'blur' }
            ],
            sortIcon: [
                { required: true, message: '分类图标不能为空', trigger: 'change' }
            ]
        };
        ruleValidate1 = {
            sortName1: [
                { required: true, message: '分类名称不能为空', trigger: 'blur' }
            ],
            sortIcon1: [
                { required: true, message: '分类图标不能为空', trigger: 'change' }
            ]
        };

        getAllResult() {
            this.AllSort = true;
            this.$router.push({ path: '/product' });
            delete this.bloc.sortDevice.productCategoryId;
            this.bloc
                .getProductList(
                    this.bloc.modelPage.pageIndex,
                    this.bloc.modelPage.pageSize,
                    'DESC',
                    undefined,
                    undefined
                )
                .then((res) => {
                    this.bloc.getAllCategory(1, 1000, 'ASC');
                });
        }

        add = false;
        edit: any = false;
        addCategory: any = false;
        sort: any = {
            id: 0,
            sortName: '',
            sortState: 0,
            sortIcon: ''
        };
        sort1: any = {
            id: 0,
            sortName1: '',
            sortState1: 0,
            sortIcon1: ''
        };

        menuIconList = [
            {
                name: 'md-create',
                resource: this.Validation.check(this.Resources.DEVICE_SORT_UPDATE)
            },
            {
                name: 'md-trash',
                resource: this.Validation.check(this.Resources.DEVICE_SORT_DELETE)
            },
            { name: 'md-arrow-down', resource: true },
            { name: 'md-arrow-up', resource: true }
        ];
        menuIcons = this.menuIconList
            .filter((item) => item.resource)
            .map((item) => item.name);

        editItem(dataItem: Product | null) {
            const id = this.bloc.sortDevice.productCategoryId + '';
            dataItem
                ? this.$router.push({
                    path: `/product/edit/${dataItem.productId}`,
                    query: { sortId: id }
                })
                : this.$router.push({ path: '/product/add', query: { sortId: id } });
        }
        imgUrl = '';
        visible = false;
        imgUrl1 = '';
        visible1 = false;
        get fileList() {
            return this.bloc.fileList.map(x => {
                return {'name': 'name', 'sortIcon': x, 'status': 'finished'};
            });
        }
        get fileList1() {
            return this.bloc.fileList1.map(x => {
                return {'name': 'name', 'sortIcon': x, 'status': 'finished'};
            });
        }
        get uploadHeaders() {
            return {
                'Authorization': 'Bearer ' + store.state.auth.accessToken
            }
        };
        get uploadAction() {
            return `${baseUrl}/api/upload/image`
        }

        handleView(url) {
            this.imgUrl = url;
            this.visible = true;
        }
        handleView1(url) {
            this.imgUrl1 = url;
            this.visible1 = true;
        }
        handleRemove(file) {
            this.bloc.fileList.splice(this.bloc.fileList.indexOf(file), 1);
            this.sort.sortIcon = null;
        }
        handleRemove1(file) {
            this.bloc.fileList1.splice(this.bloc.fileList1.indexOf(file), 1);
            this.sort1.sortIcon1 = null;
        }
        handleSuccess(res, file) {
            this.sort.sortIcon = res.data[0];
            if (this.bloc.fileList.length > 0) {
                this.bloc.fileList = []
            }
            this.bloc.fileList.push(this.sort.sortIcon)
        }
        handleSuccess1(res, file) {
            this.sort1.sortIcon1 = res.data[0]
            if (this.bloc.fileList1.length > 0) {
                this.bloc.fileList1 = []
            }
            this.bloc.fileList1.push(this.sort1.sortIcon1)
        }
        handleFormatError1(file) {
            this.$Message.error('请选择格式为JPG、PNG格式的文件')
        }
        handleMaxSize1(file) {
            this.$Message.error('图片大小不能超过50k')
        }
        $refs!: {
            sort: HTMLFormElement;
            editSort: HTMLFormElement;
            save: AppButton;
            edit: AppButton;
        };

        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$Message.success('Success!');
                } else {
                    this.$Message.error('Fail!');
                }
            });
        }

        // 删除型号
        toRemoveItem(item) {
            this.bloc.modelPut.id = item.id;
            // this.modelDelete = true
            this.bloc.model.id = item.id;
            this.$Modal.confirm({
                title: '提示',
                content: '确认删除后将无法恢复！还要继续吗？',
                okText: '删除',
                cancelText: '取消',
                onOk: () => {
                    this.bloc
                        .deleteProduct(this.bloc.model.id)
                        .then((res) => {
                            if (res.name === '') {
                                this.$Message.success('产品分类删除成功');
                                this.bloc.getProductList(
                                    this.bloc.modelPage.pageIndex,
                                    this.bloc.modelPage.pageSize,
                                    'DESC',
                                    this.bloc.sortDevice.productCategoryId,
                                    this.bloc.model.modelName
                                );
                            } else {
                                this.$Message.error('产品分类删除失败');
                            }
                        })
                        .catch((res) => {
                            this.$Message.error(res.message);
                        })
                        .finally(() => {});
                }
            });
        }
        selectCurrentMenu(val, idx) {
            this.AllSort = false;
            this.bloc.currentIdx = idx;
            this.bloc.sortDevice = val;
            this.bloc.model.sortId = val.productCategoryId;
            this.bloc.getProductList(
                1,
                this.bloc.modelPage.pageSize,
                'DESC',
                this.bloc.sortDevice.productCategoryId,
                this.bloc.model.modelName
            );
            this.changeRoute();
        }

        handleSort(icon: string, item: ProductCategory) {
            if (icon === 'md-create') this.handleEdit(item);
            if (icon === 'md-trash') {
                this.handleDelete(item);
            }
            if (icon === 'md-arrow-down') {
                this.bloc.getAllCategory(1, 1000, 'ASC').then((res) => {
                    let sortIdS = res.map((item) => {
                        return item.id;
                    });
                    let index = sortIdS.findIndex((sortId) => {
                        return sortId === item.productCategoryId;
                    });
                    if (index < sortIdS.length - 1) {
                        let sortId = sortIdS[index];
                        sortIdS[index] = sortIdS[index + 1];
                        sortIdS[index + 1] = sortId;
                        this.bloc.putCategorySort(sortIdS).then((res) => {
                            this.$Message.success('下移成功');
                            this.initTreeList();
                        });
                    } else {
                        this.$Message.success('已经是最底部了');
                    }
                });
            }
            if (icon === 'md-arrow-up') {
                this.bloc.getAllCategory(1, 1000, 'ASC').then((res) => {
                    let sortIdS = res.map((item) => {
                        return item.id;
                    });
                    let index = sortIdS.findIndex((sortId) => {
                        return sortId === item.productCategoryId;
                    });
                    if (index > 0) {
                        let sortId = sortIdS[index];
                        sortIdS[index] = sortIdS[index - 1];
                        sortIdS[index - 1] = sortId;
                        this.bloc.putCategorySort(sortIdS).then((res) => {
                            this.$Message.success('上移成功');
                            this.initTreeList();
                        });
                    } else {
                        this.$Message.success('已经是最顶部了');
                    }
                });
            }
        }

        // 新增分类方法
        handleAdd(item) {
            this.addCategory = true;
            this.sort.sortName = '';
            this.sort.sortState = 0;
            this.sort.sortIcon = '';
        }

        addSort(sort) {
            this.$refs.sort.validate((valid) => {
                if (valid) {
                    this.$refs.save.bloc.loading = true;
                    this.bloc
                        .addSort(sort.sortName, sort.sortState, sort.sortIcon)
                        .then((res) => {
                            this.addCategory = false;
                            this.initTreeList();
                            this.$Message.success('新增成功');
                            // this.$refs.save.bloc.loading = false;
                        })
                        .catch((res) => {
                            setTimeout(() => {
                                this.$Message.error('新增失败');
                            }, 1500);
                        })
                        .finally(() => {
                            setTimeout(() => {
                                this.$refs.save.bloc.loading = false;
                            }, 3000);
                        });
                }
            });
        }

        // 编辑分类
        handleEdit(item) {
            this.edit = true;
            this.sort1.sortIcon1 = item.imgUrl;
            this.bloc.fileList1 = [];
            this.bloc.fileList1.push(this.sort1.sortIcon1);
            this.sort1.id = item.productCategoryId;
            this.sort1.sortState1 = item.isAble;
            this.sort1.sortName1 = item.categoryName;
        }
        cancel() {
            this.$refs['sort'].resetFields();
            this.$refs['editSort'].resetFields();
        }

        // 删除分类
        handleDelete(item) {
            this.bloc.model.sortId = item.productCategoryId;
            this.$Modal.confirm({
                title: '提示',
                content: '确认删除后将无法恢复！还要继续吗？',
                okText: '删除',
                cancelText: '取消',
                onOk: () => {
                    this.bloc
                        .deleteSort(this.bloc.model.sortId)
                        .then((res) => {
                            if (res.message !== 'SUCCESS') {
                                this.$Message.error('产品分类删除失败');
                            } else {
                                this.$Message.success('产品分类删除成功');
                                this.initTreeList();
                            }
                        })
                        .catch((res) => {
                            this.$Message.error('产品分类删除失败');
                        })
                        .finally(() => {});
                }
            });
        }
        // 重置
        reset() {
            this.bloc.model = {
                id: 0,
                companyId: [],
                modelIcon: '',
                modelName: '',
                sortId: this.bloc.model.sortId,
                createTime: '',
                updateTime: ''
            };
            this.bloc.getProductList(
                this.bloc.modelPage.pageIndex,
                this.bloc.modelPage.pageSize,
                'DESC',
                this.bloc.sortDevice.productCategoryId,
                this.bloc.model.modelName
            );
        }
        // 改变页数
        changepages(val) {
            this.bloc.getProductList(
                val,
                this.bloc.modelPage.pageSize,
                'DESC',
                this.bloc.sortDevice.productCategoryId,
                this.bloc.model.modelName
            );
        }
        changepagesize(val) {
            this.bloc.modelPage.pageSize = val;
            this.bloc.getProductList(
                1,
                this.bloc.modelPage.pageSize,
                'DESC',
                this.bloc.sortDevice.productCategoryId,
                this.bloc.model.modelName
            );
        }

        initTreeList() {
            this.bloc
                .getAllCategory(1, 1000, 'ASC')
                .then((res) => {
                    // if (!this.bloc.sortDevice.id) {
                    //   this.bloc.sortDevice.id = res.data.items[0].id;
                    // }
                    // this.changeRoute();
                    this.bloc.model.sortId = this.bloc.sortDevice.productCategoryId;
                    this.bloc.getProductList(
                        this.bloc.modelPage.pageIndex,
                        this.bloc.modelPage.pageSize,
                        'DESC',
                        this.bloc.sortDevice.productCategoryId,
                        undefined
                    );
                })
                .finally(() => {});
        }

        changeRoute() {
            this.$router.push({
                path: '/product',
                query: { sortId: this.bloc.sortDevice.productCategoryId + '' }
            });
        }
    }
</script>
<style lang="less" scoped>
  .container {
    padding-top: 20px;
    background-color: rgba(255, 255, 255, 1);

    .tree {
      margin-left: 20px;
    }
  }

  .left {
    // min-height: 100%;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(242, 242, 242, 1);
    cursor: pointer;
  }

  .left .ivu-col-span-6 {
    display: block;
    margin-right: 60px;
    width: 18%;
    background-color: yellow;
  }

  .fade-enter-active {
    transition: all 0.3s ease;
  }

  .fade-leave-active {
    transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
  }

  .fade-enter,
  .fade-leave-to {
    transform: translateX(10px);
    opacity: 0;
  }

  .category {
    margin-bottom: 20px;
    background-color: rgba(255, 255, 255, 1);
    height: 80px;
    border: 1px solid rgba(242, 242, 242, 1);
    padding: 20px 20px;
  }
  .tree-box {
    max-height: 780px;
    overflow-y: auto;
    border-bottom: 0.5px solid #f2f2f2;
  }
  .tree-menu {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 5px 20px;
    font-size: 14px;
    color: #999;

    label {
      padding: 0 10px 0 5px;
      width: 88px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .right {
    min-height: 600px;
    background-color: rgba(255, 255, 255, 1);
  }

  .head {
    padding-left: 20px;
    padding-top: 20px;
    text-align: left;
    height: 61px;
    border-bottom: 1px solid rgba(242, 242, 242, 1);
  }

  .head span > span {
    padding-top: 2px;
  }

  .ivu-tree {
    height: 100%;
  }

  .active-menu {
    color: #0079fe;
  }

  /deep/ .ivu-tree-arrow > .ivu-icon-ios-arrow-forward:before {
    content: "\f1d0" !important;
  }

  /deep/ .ivu-layout {
    background-color: rgba(255, 255, 255, 1);
  }
</style>
